<template>
  <el-dialog
    width="1000px"
    :title="title + '卖家'"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel">
    <el-transfer
      class="my-transfer"
      :titles="['已选择卖家', '未选择卖家']"
      filterable
      filter-placeholder="请输入"
      v-model="value"
      :data="data"
      @change="handleChange">
    </el-transfer>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        {{ $t('关闭') }}
      </el-button>
      <el-button @click="handleSubmit" type="primary">
        {{ $t('确定') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getCloudGroupSellerListIs,
  getCloudGroupSellerListNot,
  removeSkuCloudGroupSeller,
  setSkuCloudGroupSeller,
} from '@/api/distribution/sku/assemblyList'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },
    /**
     * groupId
     */
    groupId: {
      type: String,
      default: '',
    },
    /**
     * title
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * type
     */
    type: {
      type: String,
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      data: [],
      value: [],
      loadingIncetance: null,
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    startLoading() {
      this.loadingIncetance = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
    },
    endLoading() {
      this.loadingIncetance?.close()
    },
    handleSubmit() {
      this.$emit('getList')
      this.$emit('update:show', false)
    },
    handleChange(value, direction, sellerIdList) {
      console.log(value, direction, sellerIdList)
      this.$confirm(this.$t('确认修改?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          this.startLoading()
          if (direction == 'left') {
            setSkuCloudGroupSeller({ groupId: this.formData.id, sellerIdList }).then(() => {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.endLoading()
              this.getList()
            })
          } else if (direction == 'right') {
            removeSkuCloudGroupSeller({ groupId: this.formData.id, sellerIdList }).then((res) => {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.endLoading()
              this.getList()
            })
          }
        })
        .catch((e) => {
          this.getList()
        })
    },
    async getList() {
      this.startLoading()

      const { data: leftData } = await getCloudGroupSellerListIs({ groupId: this.groupId })

      const { data: rightData } = await getCloudGroupSellerListNot({ groupId: this.groupId })

      this.data = [...leftData, ...rightData]?.map((item, index) => {
        return {
          key: item.distrId,
          label: item.distrName + ' ' + item.responsibleUser,
        }
      })
      this.value = rightData.map((i) => i.distrId)
      this.endLoading()
      // console.log(` this.data ==>`, JSON.parse(JSON.stringify(this.data)))
      // console.log(` this.value ==>`, JSON.parse(JSON.stringify(this.value)))
    },
    cancel() {
      this.$emit('getList')
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-transfer {
  display: flex;

  .el-transfer-panel {
    flex: 1;
  }
  .el-transfer__buttons {
    padding-top: 15%;
  }
  .el-transfer-panel__body {
    height: 500px;
    .el-transfer-panel__list {
      height: 450px;
    }
  }
}

.my-transfer {
  ::v-deep .el-transfer-panel {
    &:nth-child(1) {
      .el-transfer-panel__header {
        background: #21adfb;
        span {
          color: #000 !important;
        }
      }
    }
  }
}
</style>
